<template>
	<view class="scan" v-if="value">
		<image class="bg ani" src="../../../static/bb.png" mode="widthFix"></image>
		<image class="item" :src="`../../../static/icon/a-${img}.png`" mode="widthFix"></image>
		<view class="btn" @click="$emit('close')">
			开心收下
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		props:{
			img:{
				type:Number,
				default:-1
			},
			value:{
				type:Boolean,
				default:false
			}
		}
	}
</script>

<style scoped>
	.scan {
		position: fixed;
		background: rgba(0, 0, 0, 0.5);
		z-index: 9;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
	}

	.bg {
		position: absolute;
		top: 0;
		left: 4%;
		right: 0;
		bottom: 230rpx;
		margin: auto;
		width: 70%;
		animation: ani 1.5s infinite linear alternate-reverse;
		transform-origin: 45.5% 63%;
	}

	@keyframes ani {
		from {
			transform: scale(0.8);
			opacity: 0.7;
		}

		30% {
			transform: scale(1);
		}

		60% {
			transform: scale(0.9);
			opacity: 1;
		}

		80% {
			transform: rotateZ(30deg);
		}

		100% {
			transform: rotateZ(-30deg);
			opacity: 1;
		}
	}

@keyframes scaleAnim {
    from {
      transform: scale(0);
    }
    to {
      transform: scale(1);
    }
  }
	.item {
		position: absolute;
		top: 0;
		left: 0%;
		right: 0;
		bottom: 3%;
		margin: auto;
		width: 170rpx;
		filter: drop-shadow(0 0 20rpx #fff);
		animation: scaleAnim 1.5s forwards;
	}

	.btn {
		width: 280rpx;
		height: 80rpx;
		background: linear-gradient(to bottom, #FFA842, #EE9A4E, #E25618);
		border-radius: 10rpx;
		color: #fff;
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: 500;
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		bottom: 25%;
		margin-right: 10rpx;
		margin-left: auto;
		margin-right: auto;
		left: 0;
		right: 0;
	}
</style>